<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【抖音短视频】记录美好生活-Douyin.com</title>
    <link rel="shortcut icon" href="https://s3.pstatp.com/aweme/resource/web/static/image/logo/favicon_v2_7145ff0.ico" type="image/x-icon">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            position: relative;
        }
        .wrapper{
            width: 100%;
            height: 100%;
            background: url("girl.jpg") no-repeat center;
            background-size: cover;
            position: fixed;
        }
        .header{
            width: 100%;
            height: 75px;
        }
        .header .hleft{
            margin-left: 80px;
            margin-top: 10px;
            width: 108px;
            height: 55px;
            float: left;
            background-image:url("https://s3.pstatp.com/aweme/resource/web/static/image/index/logo_b7a2aca.png");
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .header>a{

        }
        .header .hright{
            float: left;
            width: 800px;
            margin-top: 10px;
            height:  55px;
            margin-left: 200px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .header .hright .item{
            color: #fff;
            font-size: 16px;
            line-height: 55px;
            align-content: stretch;
        }
        .hright>a{
            text-decoration: none;
        }
        .foot{
            position: absolute;
            width: 100%;
            height: 100px;
            bottom: 10px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            align-items: center;
        }
        .foot>.item{
        }
        .item.first{
            height: 14px;
            display: flex;
            flex-flow: row nowrap;
            color: #ffffff;
        }
        .item.second{

            height: 70px;
            display: flex;
            align-items: center;
            flex-flow: column nowrap;
        }
        .item.second .items{
            height: 25px;
            font-size: 14px;
            color: #ffffff;
        }
        .item.first .text{
            height: 14px;
            border-left:1px solid #ffffff ;
            font-size: 14px;
            line-height: 14px;
            padding-left: 8px;
            padding-right: 8px;
        }
        .foot a{
            text-decoration: none;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <a href="https://www.douyin.com">
        <div class="hleft">
        </div>
        </a>
        <div class="hright">
            <a href="https://www.douyin.com"><div class="item">创作服务平台</div></a>
            <a href="https://www.douyin.com"><div class="item">开放平台</div></a>
            <a href="https://www.douyin.com"><div class="item">系列产品 <i class="fa fa-caret-down"></i></div></a>
            <a href="https://www.douyin.com"><div class="item">抖音直播 <i class="fa fa-caret-down"></i></div></a>
            <a href="https://www.douyin.com"><div class="item">合作入住 <i class="fa fa-caret-down"></i></div></a>
            <a href="https://www.douyin.com"><div class="item">企业合作 <i class="fa fa-caret-down"></i></div></a>
            <a href="https://www.douyin.com"><div class="item">联系我们</div></a>
            <a href="https://www.douyin.com"><div class="item"><i class="fa fa-volume-up"></i></div></a>
        </div>
    </div>
    <div class="foot">
        <div class="item first">
            <span class="text"><a href=""> 音乐 </a></span>
            <span class="text"><a href=""> 用户服务协议 </a></span>
            <span class="text"><a href=""> 隐私政策 </a></span>
            <span class="text"><a href=""> 账号找回 </a></span>
            <span class="text"><a href=""> 广告投放 </a></span>
            <span class="text" style="border-right: 1px solid #ffffff"><a href=""> 营业执照 </a></span>
        </div>
        <div class="item second">
            <div class="items"><span>2020</span> © 抖音  | 京ICP备16016397号-3 | 北京微播视界科技有限公司 |  京B2-20170846</div>
            <div class="items"><a href=" ">中国互联网举报中心</a> | 网络文化许可证-京网文-（2016）2282-264号 | 客户服务热线：400-992-2556 | 违法和不良信息举报：400-140-2108 | 举报邮箱：jubao@douyin.com</div>
            <div class="items"><img width="20px"; height="20px" src="police.png"><a href="">京公网安备 11010802023605号</a>  |  地址 : 北京市海淀区知春路51号4层408 </div>
        </div>
    </div>
</div>
</body>
</html>